﻿<phone:PhoneApplicationPage
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                            xmlns:converters="clr-namespace:Caltrain.View"
							xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7" x:Class="Caltrain.MainPage"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="728"
                            shell:SystemTray.IsVisible="False"
							>
    <phone:PhoneApplicationPage.Resources>
        <converters:TimeConverter x:Key="TimeConverter" />
        <converters:TrainTimingColorConverter x:Key="TrainTimingColorConverter" />
        <SolidColorBrush x:Key="ListboxBrush" Color="White"/>
    </phone:PhoneApplicationPage.Resources>
    
	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.DataContext>
		<Binding Path="MainStatic" Source="{StaticResource Locator}"/>
	</phone:PhoneApplicationPage.DataContext>
    
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Assets/AppBarMap.png" Text="System Map" Click="systemMap_Click"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="about" Text="about" Click="about_Click"/>
            </shell:ApplicationBar.MenuItems>
            <!-- 
            <shell:ApplicationBarIconButton x:Name="refresh" IconUri="/Images/appbar_button1.png" Text="Refresh"/>
            -->
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
    <!--LayoutRoot contains the root grid where all other page content is placed-->
	<Grid x:Name="LayoutRoot">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
        
        <Grid.Background>
            <ImageBrush ImageSource="Assets/Caltrain1-wp.png" />
        </Grid.Background>
		<StackPanel x:Name="ContentPanel"
		            Grid.Row="1"
		            Margin="10,10,10,10">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60" />
                    <ColumnDefinition Width="320" />
                    <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>
                <Image Source="Assets/greenlight1.png" 
                       Stretch="Uniform" 
                       Height="40" 
                       Width="40" 
                       Margin="0,10,10,0"
                       Grid.Row="0" 
                       Grid.Column="0"
                       HorizontalAlignment="Center" VerticalAlignment="Center" />
                <toolkit:ListPicker x:Name="StartStation" Margin="0,8,0,0" VerticalAlignment="Top"
					     ItemsSource="{Binding Stations}" 
					     SelectedItem="{Binding SelectedStartStation, Mode=TwoWay}"
                         FontSize="25"
                         Grid.Row="0"
                         Grid.Column="1"
                         Padding="0" 
                         Width="320" 
                         Background="{StaticResource ListPickerBrush}">
                    <toolkit:ListPicker.FullModeItemTemplate>
                        <DataTemplate>
                            <TextBlock FontSize="50" Text="{Binding}" />
                        </DataTemplate>
                    </toolkit:ListPicker.FullModeItemTemplate>
                </toolkit:ListPicker>
                <Image Source="Assets/redlight1.png" 
                       Stretch="Uniform" 
                       Height="40" 
                       Width="40" 
                       Margin="0,0,10,0"
                       Grid.Row="1"
                       Grid.Column="0" 
                       HorizontalAlignment="Center" VerticalAlignment="Center" />
                <toolkit:ListPicker x:Name="DestinationStation" Margin="0,8,0,0" VerticalAlignment="Top"
				    ItemsSource="{Binding Stations}" 
				    SelectedItem="{Binding SelectedDestinationStation, Mode=TwoWay}"			
                    FontSize="25"
                    Grid.Row="1"
                    Padding="0" 
                    Width="320" 
                    Grid.Column="1" Background="{StaticResource ListPickerBrush}">
                    <toolkit:ListPicker.FullModeItemTemplate>
                        <DataTemplate>
                            <TextBlock FontSize="50" Text="{Binding}" />
                        </DataTemplate>
                    </toolkit:ListPicker.FullModeItemTemplate>
                </toolkit:ListPicker>

                <Button x:Name="Swap" Width="100" Height="100" Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Margin="0" BorderThickness="0" >
                        <Image Source="Assets/swap.png" 
                       Stretch="Uniform" 
                       Height="60" 
                       Width="60" 
                       Margin="0,0,0,0" 
                       >
                       </Image>
                    <Custom:Interaction.Triggers>
                        <Custom:EventTrigger EventName="Click">
                            <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding Swap}"/>
                        </Custom:EventTrigger>
                    </Custom:Interaction.Triggers>

                </Button>

                <toolkit:DatePicker x:Name="TravelDate" 
                                    Padding="0" 
                                    Width="340" 
                                    Margin="-10,8,0,0"
                                    Value="{Binding TravelDate, Mode=TwoWay}"
                                    Grid.Column="1" 
                                    Grid.Row="2">
                </toolkit:DatePicker>
            </Grid>
            <ListBox ItemsSource="{Binding TrainSchedules}" 
                    Height="503" 
                    SelectionMode="Single"
                    ScrollViewer.VerticalScrollBarVisibility="Visible"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Stretch"
                    ItemContainerStyle="{StaticResource ItemContainerStyle}"
                    SelectedItem="{Binding SelectedTrainSchedule, Mode=TwoWay}"
                    SelectionChanged="ListBox_SelectionChanged" Foreground="{StaticResource ListboxBrush}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Width="Auto" HorizontalAlignment="Stretch" Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <!--
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                    </Style>
                </ListBox.ItemContainerStyle>
                -->
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Gray" BorderThickness="0, 0, 0, 1" HorizontalAlignment="Stretch">
                            <Grid HorizontalAlignment="Stretch" Margin="0,0,0,5">
                                <Grid.Resources>
                                    <Style TargetType="TextBlock" x:Key="TrainTimingsStyle">
                                        <!--
                                        <Setter Property="Foreground" Value="Yellow" />
                                        -->
                                        <Setter Property="FontSize" Value="30" />
                                    </Style>
                                </Grid.Resources>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="170" />
                                    <ColumnDefinition Width="170" />
                                    <ColumnDefinition Width="140" />
                                </Grid.ColumnDefinitions>
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0">
                                    <Image Source="Assets/greenlight1.png" Stretch="Uniform" Height="20" Width="20" Margin="0,0,10,0" />
                                    <TextBlock Text="{Binding DepartureTime, Converter={StaticResource TimeConverter}}"
                                                Style="{StaticResource TrainTimingsStyle}" />
                                    <!-- Foreground="{Binding NextAvailable, Converter={StaticResource TrainTimingColorConverter}}" -->
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1">
                                    <Image Source="Assets/redlight1.png" Stretch="Uniform" Height="20" Width="20" Margin="0,0,10,0" />
                                    <TextBlock Text="{Binding ArrivalTime, Converter={StaticResource TimeConverter}}"
                                                Style="{StaticResource TrainTimingsStyle}" />
                                </StackPanel>
                                <TextBlock Grid.Row="0" Grid.Column="2"  HorizontalAlignment="Center" Text="{Binding TrainNumber}" Style="{StaticResource TrainTimingsStyle}"/>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
 		</StackPanel>
	</Grid>

</phone:PhoneApplicationPage>
